<template>
  <div class="order">
    <div v-loading="loading">
      <div class="detail_a flex">
        <p>订单中心</p>
      </div>
      <ul class="order_status flex">
        <li
          class="status_li"
          v-for="(Sitem,Sindex) in status"
          :key="Sindex"
          :class="activeS==Sitem.num?'Sactive':''"
          @click="toggle_active(Sitem.num)"
        >{{Sitem.name}}</li>
      </ul>
      <div class="order_handle flex" v-if="total!=0">
        <p style="margin-left:166px;">商品</p>
        <p style="margin-left:219px;">单价</p>
        <p style="margin-left:68px;">数量</p>
        <p style="margin-left:72px;">小计</p>
        <p style="margin-left:81px;">交易状态</p>
        <p style="margin-left:80px;">交易操作</p>
      </div>
      <div class="order_list" v-for="(list,index) in orderList" :key="index">
        <div class="flex">
          <div class="goods_list">
            <div class="order_list_goods flex" v-for="(goods,index) in list.ykGoods" :key="index">
              <div class="order_list_a flex">
                <img :src="goods.photo" alt />
                <p>{{goods.title}}</p>
              </div>
              <div class="order_list_b">￥{{goods.price}}</div>
              <div class="order_list_c" v-if="goods.type=='3'">x{{goods.num}}</div>
              <div class="order_list_c" v-else>x1</div>
            </div>
          </div>
          <div class="goods_handle flex">
            <div class="order_list_d">￥{{list.payMoney}}</div>
            <div class="order_list_e">
              <p v-if="list.orderStatus==2">待收货</p>
              <p v-if="list.orderStatus==1">待发货</p>
              <p v-if="list.orderStatus==0">未付款</p>
              <p v-if="list.orderStatus==3">已完成</p>
              <p @click="toinfo(list.id)">订单详情</p>
              <p class="e_wuliu" v-if="list.orderStatus==2" @click="Swuliu(list.id)">查看物流</p>
            </div>
            <div class="order_list_f">
              <p v-if="list.orderStatus==2" @click="toedit(list.id)">确认收货</p>
              <p v-if="list.orderStatus==1" @click="remind()">提醒发货</p>
              <p v-if="list.orderStatus==0" @click="topay(list)">去支付</p>
              <p v-if="list.orderStatus==0" @click="toremove(list.id)">取消订单</p>
              <p v-if="list.orderStatus==3" class="list_f_p"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="page" v-if="total!=0">
        <div class="page_a" @click="handleCurrentChange(1)">首页</div>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout="prev, pager, next"
          :total="total"
          :page-size="5"
        ></el-pagination>
        <div class="page_a" @click="handleCurrentChange('w')">尾页</div>
      </div>
      <div v-else class="tip2">
        <img src="../../assets/none.png" alt />
      </div>
    </div>
    <div class="modal_pay">
      <el-dialog
        :visible.sync="modelPay"
        width="500px"
        title="微信扫码支付"
        :show-close="false"
        :close-on-click-modal="false"
        center
      >
        <div>
          <img :src="code_url" alt id="code" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="paySure()">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  myOrder,
  ykOrderappOrder,
  ykOrderinfo,
  myOrderremove,
  orderedit
} from "../../api/index";
export default {
  props: {},
  data() {
    return {
      loading: true,
      activeS: "",
      status: [
        {
          num: "",
          name: "全部订单"
        },
        {
          num: "0",
          name: "待付款"
        },
        {
          num: "1",
          name: "待发货"
        },
        {
          num: "2",
          name: "待收货"
        },
        {
          num: "3",
          name: "已完成"
        }
      ],
      orderList: [],
      total: 0,
      currentPage: 1,
      pagenum: 1, //请求的页数
      pagesize: 5, //请求的数量
      userid: "",
      modelPay: false,
      code_url: "",
      htmls: "",
      order_id: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.userid = localStorage.getItem("YKuserid");
    this.post();
    this.$parent.activeItem();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        id: localStorage.getItem("YKuserid"),
        orderStatus: this.activeS,
        pageSize: this.pagesize,
        pageNum: this.pagenum
      };
      myOrder(this.qs(msg))
        .then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            this.orderList = res.data.rows;
            this.total = res.data.total;
          } else {
            this.$message({
              type: "info",
              message: res.data.msg
            });
          }
        })
        .catch(e => {});
    },
    toggle_active(i) {
      this.activeS = i;
      this.pagenum = 1;
      this.currentPage = 1;
      this.post();
    },
    handleCurrentChange(val) {
      if (val == "w") {
        this.pagenum = Math.ceil(this.total / this.pagesize);
      } else {
        this.pagenum = val;
      }
      this.currentPage = this.pagenum;
      this.loading = true;
      this.post();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //提醒发货
    remind() {
      this.$message({
        type: "info",
        message: "已提醒"
      });
    },
    //去支付
    topay(item) {
      let that = this,
        orderlist = [];
      for (let i = 0; i < item.ykGoods.length; i++) {
        orderlist.push({
          goodsId: item.ykGoods[i].id,
          num: item.ykGoods[i].num
        });
      }
      let msg = {
        ykordergoods: JSON.stringify(orderlist),
        userId: this.userid,
        payMoney: item.payMoney,
        payType: item.payType,
        username: item.username,
        useraddr: item.useraddr,
        userphone: item.userphone
      };
      ykOrderappOrder(this.qs(msg))
        .then(res => {
          if (res.data.msg == "成功" && item.payType == 0) {
            that.modelPay = true;
            that.code_url =
              "http://www.yclearn.com.cn/YK/api/ykOrder/getQRCode?code_url=" +
              res.data.code_url;
            that.order_id = res.data.ykOrder.id;
          }
          if (res.data.code == 0 && item.payType == 1) {
            if (item.payMoney > 0) {
              let routerData = this.$router.resolve({
                path: "/payGateWay",
                query: { htmls: res.data.result }
              });
              this.htmls = res.data.result; //打开新页面
              window.open(routerData.href, "_blank");
              const div = document.createElement("div");
              div.innerHTML = htmls;
              document.body.appendChild(div);
              document.forms[0].submit();
            }
          }
          if (res.data.msg == "操作成功" && item.payMoney == 0.0) {
            this.$router.push({
              name: "zhifuSuccess"
            });
          }
          this.isdisabled = false;
        })
        .catch(e => {
          this.isdisabled = false;
        });
    },
    paySure() {
      let msg = {
        id: this.order_id
      };
      ykOrderinfo(this.qs(msg))
        .then(res => {
          this.modelPay = false;
          if (res.data.ykOrder.payStatus == "0") {
            this.$message({
              type: "error",
              message: "未支付"
            });
          } else {
            this.$router.push({
              name: "zhifuSuccess"
            });
          }
          this.post();
        })
        .catch(e => {});
    },
    toremove(id) {
      let msg = {
        ids: id
      };
      myOrderremove(this.qs(msg))
        .then(res => {
          this.post();
          this.$message({
            type: "success",
            message: res.data.msg
          });
        })
        .catch(e => {});
    },
    //确认收货
    toedit(id) {
      let msg = {
        id: id
      };
      orderedit(this.qs(msg))
        .then(res => {
          this.post();
          this.$message({
            type: "success",
            message: res.data.msg
          });
        })
        .catch(e => {});
    },
    //订单详情
    toinfo(id) {
      this.$router.push({
        name: "orderDetail",
        params: {
          orderid: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    Swuliu(id) {
      this.$router.push({
        name: "orderWuliu",
        params: {
          orderid: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
  components: {}
};
</script>

<style scoped>
.detail_a {
  justify-content: space-between;
  margin-left: 25px;
  margin-right: 24px;
  border-bottom: 1px solid #57595e;
}
.detail_a > p:nth-child(1) {
  font-size: 18px;
  height: 48px;
  line-height:64px;
  color: #c9a650;
}
.order {
  width: 100%;
  padding-bottom: 33px;
}
.order_status {
  margin-left: 24px;
  padding-top: 22px;
  margin-bottom: 9px;
}
.status_li {
  width: 66px;
  text-align: center;
  padding-bottom: 7px;
  border-bottom: 3px solid #35373f;
  font-size: 16px;
  color: #dfd4d4;
  margin-right: 49px;
  cursor: pointer;
}
.Sactive {
  border-bottom: 3px solid #c9a650 !important;
  color: #c9a650 !important;
}
.order_handle {
  width: 980px;
  height: 42px;
  background: rgba(250, 247, 247, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  margin-left: 24px;
  margin-bottom: 16px;
}
.order_handle {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
}
/* orderlist */
.order_list {
  width: 979px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-left: 24px;
  padding-top: 23px;
  margin-bottom: 10px;
}
.order_list_goods {
  justify-content: space-between;
  padding-right: 59px;
  padding-left: 26px;
  margin-bottom: 23px;
}
.goods_list {
  width: 592px;
}
.order_list_a > img {
  width: 72px;
  height: auto;
  margin-right: 16px;
}
.order_list_a > p {
  width: 227px;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
}
.order_list_b,
.order_list_c,
.order_list_e > p {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  cursor: pointer;
}
.order_list_e > p {
  text-align: center;
  margin-bottom: 5px;
}
.goods_handle {
  margin-bottom: 23px;
  width: 328px;
  justify-content: space-between;
}
.order_list_d {
  font-size: 18px;
  color: #d81417;
}
.e_wuliu {
  color: #d81417 !important;
}
.order_list_f > p {
  width: 76px;
  height: 30px;
  font-size: 14px;
  color: rgba(216, 20, 23, 1);
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.order_list_f > p:hover {
  background: rgba(216, 20, 23, 1);
  border-radius: 4px;
  color: #fff;
}
.list_f_p:hover {
  background: #fff !important;
  border-radius: 4px;
  color: #fff;
}
/* page */
.page {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.page >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #d81417 !important;
}
.page >>> .el-pager li,
.page >>> .btn-next,
.page >>> .btn-prev {
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 34px;
  text-align: center;
  border-radius: 5px;
}
.page_a {
  width: 34px;
  height: 34px;
  background: rgba(243, 243, 243, 1);
  border-radius: 5px;
  font-size: 12px;
  color: #333;
  line-height: 34px;
  text-align: center;
}
.page_a:hover {
  background: #d81417;
  color: #fff;
}
#code {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.modal_pay >>> .el-button--primary {
  border-color: #d81417;
  background-color: #d81417;
}
</style>
